﻿@page "/component/feedback/dialog"
@inject IDialogService DialogService

<Pager DataSource="@(new List<string>(new[] { 
                         "Demo","Configuration","Callback","Methods"
                     }))">
    <Body>

<Header1 Divider>
    Dialog
    <SubHeader>
        Call Modal component by DI service
    </SubHeader>
</Header1>

<Message State="State.Warning">
    <List Ordered>
        <Item>
            Make use you have a component of <code>BlamanticUIContainer </code> in your page. See configuration at <a href="/">step 5</a>.
        </Item>
        <Item>
            Inject service <code>IDialogService</code>
        </Item>
    </List>    
</Message>

<DialogContainer/>

<PresentationPart Title="Demo">
    <RunTemplate>
        <Button @onclick="@(()=>DialogService.ShowAlert("Alert"))" Emphasis="Emphasis.Primary">Alert</Button>
        <Button @onclick="@(()=>DialogService.ShowConfirm("Confirm to delete?"))" Emphasis="Emphasis.Secondary">Confirm</Button>
        <Button @onclick="@(()=>DialogService.ShowPropmt("Enter your name:"))" Emphasis="Emphasis.Negative">Prompt</Button>
    </RunTemplate>
    <CodeTemplate>
@Code.GetCode(@"
```html
@inject IDialogService DialogService

<DialogContainer/>

<Button @onclick=""@(()=>DialogService.ShowAlert(""Alert""))"" Emphasis=""Emphasis.Primary"">Alert</Button>
<Button @onclick=""@(()=>DialogService.ShowConfirm(""Confirm to delete?""))"" Emphasis=""Emphasis.Secondary"">Confirm</Button>
<Button @onclick=""@(()=>DialogService.ShowPropmt(""Enter your name:""))"" Emphasis=""Emphasis.Negative"">Prompt</Button>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Configuration">
    <Description>
        Call <code>Show</code> method to customize configuration of dialog.
    </Description>
    <RunTemplate>

        <Button @onclick="@(()=>DialogService.Show(option=>
                           {
                               option.CancelColor = Color.Purple;
                               option.ConfirmColor = Color.Brown;
                               option.ConfirmText = "I'm OK!";
                               option.ConfirmOutline = true;
                               option.Size = Size.Large;
                               option.Title = "Big message";
                               option.Message = "I have so large message to show";
                           }))">Customization</Button>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<Button @onclick=""@(()=>DialogService.Show(option=>
                    {
                        option.CancelColor = Color.Purple;
                        option.ConfirmColor = Color.Brown;
                        option.ConfirmText = ""I'm OK!"";
                        option.ConfirmOutline = true;
                        option.Size = Size.Large;
                        option.Title = ""Big message"";
                        option.Message = ""I have so large message to show"";
                    }))"">Customization</Button>
```
")
    </CodeTemplate>
</PresentationPart>
        <PresentationPart Title="Callback">
            <RunTemplate>
                <Button @onclick="@(()=>DialogService.ShowAlert("Submit Successfully","Alert",_=>JS.InvokeVoidAsync("alert","Alert callback")))" Emphasis="Emphasis.Primary">Alert</Button>
                <Button @onclick="@(()=>DialogService.ShowConfirm("Confirm to delete?","Deleting",flag=>JS.InvokeVoidAsync("alert",$"You click confirm"),()=>JS.InvokeVoidAsync("alert","You click cancel")))" Emphasis="Emphasis.Secondary">Confirm</Button>
                <Button @onclick="@(()=>DialogService.ShowPropmt("Enter a name:","Prompt",value=>JS.InvokeVoidAsync("alert",$"Value is {value}")))" Emphasis="Emphasis.Negative">Prompt</Button>
            </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
@inject IJSRuntime JS
<Button @onclick=""@(()=>DialogService.ShowAlert(""Submit Successfully"",""Alert"",_=>JS.InvokeVoidAsync(""alert"",""Alert callback"")))"" Emphasis=""Emphasis.Primary"">Alert</Button>
<Button @onclick=""@(()=>DialogService.ShowConfirm(""Confirm to delete?"",""Deleting"",flag=>JS.InvokeVoidAsync(""alert"",$""You click confirm""),()=>JS.InvokeVoidAsync(""alert"",""You click cancel"")))"" Emphasis=""Emphasis.Secondary"">Confirm</Button>
<Button @onclick=""@(()=>DialogService.ShowPropmt(""Enter a name:"",""Prompt"",value=>JS.InvokeVoidAsync(""alert"",$""Value is {value}"")))"" Emphasis=""Emphasis.Negative"">Prompt</Button>
```
")
    </CodeTemplate>
</PresentationPart>
        <MethodTable>
            <Content>
                <tr>
                    <td>ShowAlert(string message, string title = default, Action&lt;object> onConfirm = default)</td>
                    <td>Within a confirm button to show alert</td>
                </tr>
                <tr>
                    <td>ShowConfirm(string message, string title = default, Action&lt;object> onConfirm = default, Action onCancel = default)</td>
                    <td>Within a confirm button and a cancel button to ask confirmation</td>
                </tr>
                <tr>
                    <td>ShowPrompt(string message, string title = default, Action&lt;object> onConfirm = default)</td>
                    <td>Within a textbox, a confirm button and a cancel button to prompt to enter a value</td>
                </tr>
            </Content>
        </MethodTable>
    </Body>
</Pager>
@inject IJSRuntime JS